<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps({
  remaining: { type: Number, default: 0 },
  completed: { type: Number, default: 0 },
  filter: { type: String, default: 'all' },
})

const emit = defineEmits(['filter', 'clearCompleted'])
</script>

<template>
  <footer class="footer">
    <span class="count">未完成：{{ remaining }} 项</span>
    <div class="filters">
      <button :class="{ active: filter === 'all' }" @click="emit('filter', 'all')">全部</button>
      <button :class="{ active: filter === 'active' }" @click="emit('filter', 'active')">未完成</button>
      <button :class="{ active: filter === 'completed' }" @click="emit('filter', 'completed')">已完成</button>
    </div>
    <button class="clear" :disabled="completed === 0" @click="emit('clearCompleted')">
      清除已完成 ({{ completed }})
    </button>
  </footer>
</template>

<style scoped>
.footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.filters { display: flex; gap: 8px; }
.filters button { padding: 4px 10px; border: 1px solid #eaeaea; background: #fafafa; border-radius: 6px; cursor: pointer; }
.filters .active { color: #42b883; border-color: #42b883; background: #e8f8f1; }
.clear:disabled { opacity: 0.5; cursor: not-allowed; }
</style>


